<template>
  <view>
    <view class="b-head">
      <view class="b-head__state">
        <view class="b-head__state-a" @tap="handleUrl('/pages/GoodsManage/goodsList')">
          <image src="../../static/img/csz.png"></image>
          <text class="text1">出售中</text>
          <text class="text2">{{goodsData.sale}}</text>
        </view>
        <view class="b-head__state-a"  @tap="handleUrl('/pages/GoodsManage/goodsList?tabIndex=1')">
          <image src="../../static/img/ckz.png"></image>
          <text class="text1">仓库中</text>
          <text class="text2">{{goodsData.stock}}</text>
        </view>
      </view>
    </view>
    <view class="b-handle">
      <view class="b-handle__item" @tap="handleUrl('/pages/IssueGoods/index')">
        <image src="../../static/img/fbsp.png"></image>
        <text>发布商品</text>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  onLoad(){
      this. getGoodsData()
  },
  
  data(){
    return{
      goodsData:{}
    }
  },
    methods: {
      async getGoodsData(){
        const shopId =  uni.getStorageSync('shopInfo').shopId
        let res = await this.$http.GET({
          url:'/seller/goods/goodsNumSalAndStock',
          data:{
            shopId,
          }
        })
        this.goodsData = res.data
      },
    handleUrl(url) {
      uni.navigateTo({
        url
      });
    }
  },
}
</script>


<style lang="scss" scoped>
@import '@/scss';
@include b(head) {
  background: #4785F1;
  position: relative;
  @include size(100%, 250upx);
  @include e(state) {
    position: absolute;
    bottom: -110upx;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    @include size(680upx, 290upx);
    @include flex-center;
    border-radius: 20upx;
    &-a {
      @include flex-cl;
      width: 50%;
      image {
        @include size(50upx, 50upx);
      }
      .text1 {
        padding: 10upx 0;
        color: #777;
      }
    }
  }
}
@include b(handle) {
  @include size(680upx, 150upx);
  background: #fff;
  margin: 130upx auto 0 auto;
  border-radius: 18upx;
  display: flex;
  padding: 20upx 0;
  @include e(item) {
    width: 100%;
    @include flex-center;
    image {
      @include size(50upx, 50upx);
    }
    text{
      padding-left: 20upx;
      color: #666;
    }
    &:nth-child(1) {
      border-right: 1px solid #eee;
    }
  }
}
</style>